<script>
import Vue from 'vue'
import { mapState } from 'vuex'
import { Tabbar, TabbarItem } from 'vant';
import { mapActions } from 'vuex'

Vue.use(Tabbar);
Vue.use(TabbarItem);

import cookbookActive from '../assets/images/cookbook-active.png'
import cookbook from '../assets/images/cookbook.png'

import menuActive from '../assets/images/menu-active.png'
import menu from '../assets/images/menu.png'

import locationActive from '../assets/images/location-active.png'
import location from '../assets/images/location.png'

import moreActive from '../assets/images/more-active.png'
import more from '../assets/images/more.png'
window.x = 100
export default {
  data() {
    return {
      active: "b",
      cookbookActive,
      cookbook: {
        active: cookbookActive,
        inactive: cookbook
      },
      menu: {
        active: menuActive,
        inactive: menu
      },
      location: {
        active: locationActive,
        inactive: location
      },
      more: {
        active: moreActive,
        inactive: more
      },
      x: {
        a: 100
      }
    }
  },

  computed: {
    ...mapState(['showMap']),

    async multiX() {
      const y = this.x.a * this.x.a
      // return this.x.a * this.x.a
      return y
    }
  },

  methods: {
    ...mapActions(['loadData'])
  },

  mounted() {
    this.loadData()
    setTimeout(() => {
      this.x.a = 1
    }, 2000)
  },

  watch: {
    'x.a': async function(newValue) {
      let w = await new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(1000)
        }, 2000)
      })
      console.log(w + newValue)
    }
  }
}
</script>

<template>
  <div class="home-container">
    {{multiX}}
    <main>
      <router-view></router-view>
    </main>
    <van-tabbar
     v-model="active" 
     active-color="#000000"
     :fixed="false"
     :route="true"
    >
      <van-tabbar-item name="a" icon="like-o" to="/home/cookbook">
        <span>美食大全</span>
        <template #icon="{active}">
          <img :src="active ? cookbook.active : cookbook.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item name="b" icon="search" to="/home/category/cate">
        <span :class="{active: $route.fullPath.includes('/home/category')}">分类</span>
        <template #icon="{active}">
          <img :src="$route.fullPath.includes('/home/category') ? menu.active : menu.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item 
        name="c" 
        icon="friends-o" 
        to="/home/location"
        v-if="showMap"
      >
        <span>美食地图</span>
        <template #icon="{active}">
          <img :src="active ? location.active : location.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item name="d" icon="friends-o" to="/home/more">
        <span>更多</span>
        <template #icon="{active}">
          <img :src="active ? more.active : more.inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<style lang="scss" scoped>
.home-container {
  height: 100%;
  display: flex;
  flex-direction: column;

  header {
    height: 0.44rem;
    background: #ee7530;
    text-align: center;
    line-height: .44rem;
    font-size: .18rem;
    color: #ffffff;
  }

  main {
    flex: 1;
    overflow-y: scroll;
  }

  .van-tabbar-item__text {
    span.active {
      color: #000;
    }
  }

  /* [class*=van-hairline]::after {
    border-color: red;
  } */
}

</style>

<style lang="scss">
  header {
    height: 0.44rem;
    background: #ee7530;
    text-align: center;
    line-height: .44rem;
    font-size: .18rem;
    color: #ffffff;
  }
</style>

